import React from 'react';
import './musicListItem.less';
import Pubsub from 'pubsub-js';

let MusicListItem = React.createClass({
	
	playMusic(musicItem){
		Pubsub.publish('PLAY_MUSIC',musicItem);
	},
	delMusic(musicItem,e){
		e.stopPropagation();//阻止冒泡
		Pubsub.publish('DEL_MUSIC',musicItem);
	},

	render(){
		let musicItem = this.props.musicItem;
		return(
			<li onClick={this.playMusic.bind(this,musicItem)} className={`components-listitem row ${this.props.focus ? 'focus' : ''}`}>
				<p>{musicItem.title} - {musicItem.artist}</p>
				<p onClick={this.delMusic.bind(this,musicItem)} className="-col-auto delete"></p>
			</li>
		)
	}
});

export default MusicListItem;